<template>
  <!-- 基础工资 1 -->
  <div>
    <Row class="search-info-style">
      <Col span="6">
        <span style="">职位：</span>
        <Select v-model="searchInfo.post" filterable transfer=""  style="width: 70%;">
          <Option :value="item.TYPECODE" v-for="item in positionList" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
        </Select>
      </Col>
      <Col style="float:right" pull="1">
         <Button class="new-btn-sty" @click="init()"><Icon type="ios-search" />搜索</Button>
        <Button class="new-btn-sty" @click="add()"><Icon type="md-add" />添加</Button>
      </Col>
    </Row>
    <Table border :columns="columns" :data="data">
      <template slot-scope="{ row }" slot="post">
        <span  :value="item.TYPECODE" v-for="item in positionList" v-bind:key="item.TYPECODE"  v-if="row.post == item.TYPECODE">{{ item.TYPENAME }}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
        <!--        <Button type="error" size="small" @click="remove(index)">Delete</Button>-->
      </template>
    </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page class="page_style" :total="totalnum" :current="currentPageNo"
          :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Modal v-model="modalEdit" title="职位基本工资" @on-ok="OK111">
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">职位:<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <Select v-model="paramData.post" filterable transfer="">
              <Option :value="item.TYPECODE" v-for="item in positionList" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">基本工资(元):<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <InputNumber style="width: 245px" :min="0" v-model="paramData.money_num" placeholder="请输入该职位基本工资"/>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { createBasePay, findBasePayList, getTypeNameList } from '@/api/eventlist'
export default {
  data () {
    return {
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      loadData: true,
      paramData: {money_num:0,},
      positionList: [],
      data: [],
      searchInfo: {},
      modalEdit:false,
      modalShow:false,
      columns: [
        { title: '序号', type: 'index', width: 100, align: 'center' },
        { title: '区县', key: 'company_name', minWidth: 100, align: 'center' },
        { title: '职位', slot: 'post', minWidth: 100, align: 'center' },
        { title: '基本工资(元)', key: 'money_num', minWidth: 100, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 100, align: 'center' }
      ]
    }},
  methods: {
    init() {
      console.log('初始化方法')
      let param = {
        pageSize: this.currentPageSize,
        pageNo: this.currentPageNo,
        post: this.searchInfo.post
      }
      findBasePayList (param).then(res => {
        if (res.data.errcode === 0) {
          this.data = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
        } else {
          this.$Notice.error({
            title: '获取基本工资列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    show (item) {
      this.paramData = this.$common.xeUtils.clone(item,true)
      this.modalEdit = true
    },
    add () {
      console.log('添加的方法')
      this.paramData = {money_num:0}
      this.modalEdit = true
    },

    getTypeName (id) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.positionList = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    updateQuota () {
      updateCityQuotaNum(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '修改成功', desc: '' })
          this.init()
        } else {
          this.$Notice.error({ title: '操作失败!', desc: res.data.errmsg })
          this.init()
        }
      })
    },
    cancelModal () {
      this.init()
    },
    OK111() {

      createBasePay(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功', desc: '' })
          this.init()
        } else {
          this.$Notice.error({ title: '保存失败!', desc: res.data.errmsg })
          this.init()
        }
      })
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    }
  },

  mounted() {
    this.init()
    this.getTypeName('position')
  }
}
</script>
<style scoped>
.search-info-style {
  margin: 10px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.item1{
  height: 42px;
  line-height: 40px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
</style>
